<template>
  <div class="page-warp">
    <div class="page-warp-layout">
      <div class="page-warp-crumbs mt-12">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/interview' }">{{ jobName }}</el-breadcrumb-item>
          <el-breadcrumb-item >修改面试官</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="page-warp-content mt-24 flex-col align-items-center justify-center">
        <div class="page-warp-avatar" :style="{background:'url('+curdata.avatar+') center center no-repeat #fff'}">
          <div class="page-warp-avataredit pointer">
            <el-upload
                ref="uploadRef"
                class="upload-demo"
                action="https://api.bytesbay.cn/bolePin/user/uploadPicture"
                :auto-upload="true"
                :show-file-list="false"
                name="filename"
                :headers="updataParam"
                :on-success="onSuccess"
              >
              <template #trigger>
                <el-icon :size="20" color="#999">
                  <Edit />
                </el-icon>
              </template> 
            </el-upload>
          </div>
        </div>
        <div class="page-warp-desctitle mt-24 bold">名称</div>
        <div class="page-warp-jobname bold f-16 mt-12">
          <el-input v-model="curdata.fullname" style="width: 600px" placeholder="请输入名称" />
        </div>
        <div class="page-warp-desctitle mt-24 bold">标题</div>
        <div class="page-warp-dsce mt-12">
          <el-input v-model="curdata.title" style="width: 600px" placeholder="请输入标题" />
        </div>
        <div class="page-warp-desctitle mt-24 bold">音色</div>
        <div class="page-warp-dsce mt-12">
          <el-select v-model="curdata.voice" placeholder="请选择音色" style="width: 600px">
            <el-option
              v-for="item in voiceList"
              :key="item.voice_type"
              :label="item.name"
              :value="item.voice_type"
            >
              <div class="flex-row space-between align-items-center">
                <div>{{ item.name }}</div>
                <div class="f-12 gray-color">
                  {{ item.scene }}-{{ item.language }}
                </div>
              </div>
            </el-option>
          </el-select>
        </div>
        <div class="page-warp-desctitle mt-24 bold flex-row align-items-center">
          <span>优先提问</span>
          <span class="ml-12" style="margin-top:4px">
            <el-popover
            class="box-item"
            placement="top"
            width="280px"
          >
            <template #default>
              <div style="padding:12px">所有的问题将会在AI面试中优先被提问</div>
            </template>
            <template #reference>
              <el-icon size="16"><Warning /></el-icon>
              <!-- <el-button :icon="Warning"></el-button> -->
            </template>
          </el-popover> 
          </span>
        </div>
        <div class="page-warp-dsce mt-12">
          <div v-for="(item, index) in qList" :key="index" class="mb-12" style="width:600px">
            <div class="bold mb-8 f-14">问题 {{index+1}}</div>
            <div class="flex-row align-items-center">
              <div class="flex-1">
                <el-input v-model="item.name" style="width: 100%" placeholder="请输入问题内容" />
              </div>
              <div class="ml-12" @click="deleteItem(index)">
                <el-icon size="16"><Close /></el-icon>
              </div>
            </div>
          </div>
          <div class="mt-12 flex-row justify-center">
            <el-button :icon="Plus" @click="addItem" type="primary" :disabled="qList.length>=10" size="small">添加问题</el-button>
          </div>
        </div>
        <!-- <div class="page-warp-desctitle mt-24 bold">系统提示词</div>
        <div class="page-warp-desc mt-12">
          <el-input
            v-model="curdata.prompt"
            style="width: 100%"
            :rows="14"
            type="textarea"
            placeholder="请输入系统提示词"
            readonly
          />
        </div> -->

        <!-- <div class="page-warp-desctitle mt-24 bold">开场白</div>
        <div class="page-warp-desc mt-12">
          <el-input
              v-model="curdata.prologue"
              style="width: 100%"
              :rows="11"
              type="textarea"
              placeholder="请输入开场白"
              readonly
            />
        </div> -->
        <div class="page-warp-Btn mt-24 ">
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { ArrowRight, Edit, Close, Warning, Plus } from '@element-plus/icons-vue'
import { agentGetDetailInfo, agentUpdate, dictionaryDictionary, getQuestions, saveQuestions } from '@/api/api'
import { Toast } from '@/utils/vant'
import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
import { ElMessage, ElMessageBox  } from 'element-plus'
import { useRoute } from 'vue-router'
const updataParam = reactive({
    Token: ""
  })
const route = useRoute()
const jobName = ref("")
const curdata = ref({})
const voiceList = ref([])
const qList  = ref([])
const jobId = ref("")
const getInit = () => {
  const { name, id } = route.params
  const { jobid } = route.query
  jobName.value = name
  jobId.value = jobid

  agentGetDetailInfo({
    agent_id: id
  }).then(res => {
    curdata.value = res.data
  }) 
}

const save = async () => {
  const { id } = route.params
  if (!curdata.value.avatar) {
    Toast('头像未传')
    return
  }

  if (!curdata.value.fullname) {
    Toast('名称没有填写')
    return
  }

  if (!curdata.value.title) {
    Toast('标题没有填写')
    return
  }

  if (!curdata.value.prompt) {
    Toast('系统提示词没有填写')
    return
  }

  if (!curdata.value.prologue) {
    Toast('开场白没有填写')
    return
  }
  if (qList.value.length > 0) {
    await saveQuestions({
      job_id: jobId.value,
      questions: qList.value.map(item => item.name)
    })
  } 

  agentUpdate({
    ...curdata.value,
    agent_id: id
  }).then(res => {
    Toast('保存成功')
  })
}

const onSuccess = (e) => {
  curdata.value.avatar = e.data 
}

const deleteItem = (index) => {
  qList.value.splice(index, 1)
}

const addItem = () => {
  if(qList.value.length >= 10) {
    ElMessage('添加问题最多10个人')
    return
  }
  qList.value.push({
    name: ''
  })
}
const getdictionaryDictionary = () => {
  dictionaryDictionary().then(res => {
    voiceList.value = res.data.list
  }).catch(err => {
    loading.value = false
  })
}


const getQuestionsList = () => {
  getQuestions({
    job_id: jobId.value
  }).then(res => {
    qList.value = res.data.map(item => {
      return {
        name: item
      }
    })
    console.log('--------getQuestionsList---------', res)
  })
}

onMounted(() => {
  updataParam.Token = getToken()
  getdictionaryDictionary()
  getInit()
  getQuestionsList()
})
</script>

<style lang="scss" scoped>


.page-warp{
  padding-top: 60px;
  background: #fff;
  height: calc(100vh - 60px);
  overflow-y: auto;
  display: flex;
  &-layout{
    width: 988px;
    margin: 0 auto;
    font-size: 12px;
  } 

  &-avatar{
    width: 100px;
    height: 100px;
    border-radius:100px;
    border: #ddd 1px solid;
    background: #fff;
    position: relative;
    background-size: 120px auto !important;
  }

  &-avataredit{
    position: absolute;
    bottom: 0;
    right: -10px;
  }

  &-content{
    width: 600px;
    margin: 0 auto;
  }

  &-desctitle{
    text-align: left;
    width: 100%;
    font-size:14px
  }
  &-desc{
    width: 100%;
    border-radius: 12px;
    background: #fff;
    min-height: 100px;
  }

  &-Btn{
    margin-bottom: 60px;
  }
}
</style>